<template>
	<view style="background-color: #f7f7f7;">
		<view class="top">
			<view style="text-align: center; font-size: 35rpx; color: #fff;">注册</view>
			<view class="card">
				<view class="input_line">
					<text>负责人：</text>
					<input class="input" type="text" placeholder="输入负责人姓名" v-model="shangjiarenzheng.director"/>
				</view>
				<view class="input_line">
					<text>身份证号码：</text>
					<input class="input" type="text" placeholder="输入负责人身份证号码" v-model="shangjiarenzheng.idCard"/>
				</view>
				<view class="input_line">
					<text>手机号：</text>
					<input class="input" type="text" placeholder="输入手机号" v-model="shangjiarenzheng.mobile"/>
				</view>
				<view class="input_line">
					<text>验证码：</text>
					<view class="input" style="color: gray; margin: 0; height: 30rpx; width: 290rpx; display: flex; justify-content: space-between; align-items: center;">
						<input style="font-size: 20rpx; width: 160rpx;" type="text" placeholder="输入验证码"/>
						|<text style="color: #4c8efe;  padding: 5rpx;">获取验证码</text>
					</view>
				</view>
				<view class="input_line">
					<text>店名：</text>
					<input class="input" type="text" placeholder="输入店名" v-model="dianpu.name"/>
				</view>
				<view class="input_line">
					<text>工商营业执照号码：</text>
					<input class="input" type="text" placeholder="输入营业执照号码" v-model="shangjiarenzheng.businessLicenseId"/>
				</view>
				<view class="input_line">
					<text>经营区域：</text>
					<input class="input" type="text" placeholder="选择区县" v-model="dianpu.operatingArea"/>
				</view>
				<view class="input_line">
					<text>地址：</text>
					<input class="input" type="text" placeholder="输入详细地址" v-model="dianpu.address"/>
				</view>
			</view>
		</view>	
		<view style="height: 400rpx;"></view>
		<view class="card">
			<view class="big_title">商家介绍</view>
			<textarea style="margin: 20rpx; padding: 10rpx; height: 200rpx; border: 1px solid gray; border-radius: 15px;" placeholder="请准确介绍一下公司" v-model="dianpu.description"></textarea>
		</view>
		<view class="card">
			<view class="big_title">身份证证正反面照片</view>
			<view>
				<view class="card">
					<view class="card-title">正面<text class="desc"></text></view>
					<view class="divider"></view>
					<view class="photo-upload">
						<view class="photo-box" @click="choosePhoto1">
							<text class="plus">+</text>
							<text class="upload-text">上传照片</text>
						</view>
						<image v-for="(img, index) in photo1" :key="index" class="photo-img" :src="img.url" @click="choosePhoto11(photo1,index)" />
					</view>
				</view>
				<view class="card">
					<view class="card-title">反面<text class="desc"></text></view>
					<view class="divider"></view>
					<view class="photo-upload">
						<view class="photo-box" @click="choosePhoto2">
							<text class="plus">+</text>
							<text class="upload-text">上传照片</text>
						</view>
						<image v-for="(img, index) in photo2" :key="index" class="photo-img" :src="img.url" @click="choosePhoto11(photo2,index)" />
					</view>
				</view>
			</view>
			
		</view>
		<view class="card">
			<view class="big_title">营业执照</view>
			<!-- <view class="card-title">照片 <text class="desc"></text></view> -->
			<view class="divider"></view>
			<view class="photo-upload">
				<view class="photo-box" @click="choosePhoto3">
					<text class="plus">+</text>
					<text class="upload-text">上传照片</text>
				</view>
				<image v-for="(img, index) in photo3" :key="index" class="photo-img" :src="img.url" @click="choosePhoto11(photo3,index)" />
			</view>
		</view>
		<view class="card">
			<view class="big_title">门面照片</view>
			<view class="divider"></view>
			<view class="photo-upload">
				<view class="photo-box" @click="choosePhoto4">
					<text class="plus">+</text>
					<text class="upload-text">上传照片</text>
				</view>
				<image v-for="(img, index) in photo4" :key="index" class="photo-img" :src="img.url" @click="choosePhoto11(photo4,index)" />
			</view>
		</view>
		<button @click="register()" style="margin: 50rpx 100rpx; border-radius: 25px; background-color: #5590f8; color: white;">注册</button>
		<button @click="getJingWei()">123</button>
	</view>
</template>

<script setup>
	import { ref,reactive } from 'vue';
	import request from "@/utils/request.js"
	import baseUrl from '../../utils/urlConfig';
	function onLogin(){
		uni.redirectTo({
			url:'/pages/login/login'
		})
	}
	const key=ref()
	const photo1 = reactive([])
	const photo2 = reactive([])
	const photo3 = reactive([])
	const photo4 = reactive([])
	const shangjiarenzheng=ref({
		mid:null,
		director:null,
		idCard:null,
		mobile:null,
		businessLicenseId:null,
		businessLicenseImg: null,
		front: null,
		opposite: null
	})
	const dianpu=ref({
		id: null,
		name: null,
		operatingArea: null,
		regTime: null,
		startTime: '09:00:00',
		endTime: '18:00:00',
		address: null,
		longitude: null,
		latitude: null,
		description: null,
		rete: null,
		status: null,
		deleted: null,
		auditStatusId: null
	})
	function getYan(){
		request({
			url:"/auth/sendSms",
			method:"GET",
			data:{
				phoneNumber:phone.value
			},
			success:(res)=> {
				key.value=res.data.data
			}
		})
	}
	
	function register(){
		shangjiarenzheng.value.front=photo1.map(item => item.url).join(',');
		shangjiarenzheng.value.opposite=photo2.map(item => item.url).join(',');
		shangjiarenzheng.value.businessLicenseImg=photo3.map(item => item.url).join(',');
		getJingWei(dianpu.value.address)
	}
	function re2(){
		
	}
	function getJingWei(add){
		uni.request({
			url:'https://restapi.amap.com/v3/geocode/geo',
			method:'GET',
			data:{
				key: 'cd2aeb25b049ef42261f6adb2caea630',
				address: add,// 该数据就可以根据输入框的内容进行动态设置
				output: 'json'
				
			},
			success: (res1) => {
				// console.log(res)
				let location = res1.data.geocodes[0].location
				dianpu.value.longitude=location.split(',')[0]
				dianpu.value.latitude=location.split(',')[1]
				// console.log(location.split(',')[1]);
				request({
					url:"/yyq/merchant/register",
					method:'POST',
					data:dianpu.value,
					success: (res2) => {
						shangjiarenzheng.value.mid=res2.data.data
						request({
							url:"/yyq/verification/register",
							method:'POST',
							data:shangjiarenzheng.value,
							success: (res3) => {
								console.log(res3.data.data)
								let deptId=res3.data.data
								request({
									url:"/auth/register2",
									method:'POST',
									data:{
										deptId:deptId,
										username:shangjiarenzheng.value.mobile,
										phonenumber:shangjiarenzheng.value.mobile,
										nickName:shangjiarenzheng.value.director,
										password:"123456"
									},
									headers: {
									    isToken: false
									},
									success: (res4) => {
										console.log(res4)
									}
								})
							}
						})
					}
				})
			}
		})
	}
	function choosePhoto11(photo,index){
		photo.splice(index, 1)
	}
	
	function choosePhoto1() {
		uni.chooseImage({
			count: 1,
			success: res => {
				const tempFilePaths = res.tempFilePaths[0];
				uni.uploadFile({
					url: baseUrl+'/file/upload',
					filePath: tempFilePaths,
					name: 'file',
					header: {
						Authorization: uni.getStorageSync('token')
					},
					success: (uploadRes) => {
						const data = JSON.parse(uploadRes.data);
						console.log('图片上传成功', data);
						try {
							// 创建一个新数组并添加新元素
							const newPhotos = [...photo1, { url: data.data.url , name: data.data.name }];
							// 替换整个数组
							photo1.length = 0;
							newPhotos.forEach(item => photo1.push(item));
						} catch (error) {
							console.error('解析接口返回数据失败', error);
							uni.showToast({
								title: '解析接口返回数据失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						console.error('图片上传失败', err);
						uni.showToast({
							title: '图片上传失败',
							icon: 'none'
						});
					}
				});
			}
		})
	}
	function choosePhoto2() {
		uni.chooseImage({
			count: 1,
			success: res => {
				const tempFilePaths = res.tempFilePaths[0];
				uni.uploadFile({
					url: baseUrl+'/file/upload',
					filePath: tempFilePaths,
					name: 'file',
					header: {
						Authorization: uni.getStorageSync('token')
					},
					success: (uploadRes) => {
						const data = JSON.parse(uploadRes.data);
						console.log('图片上传成功', data);
						try {
							// 创建一个新数组并添加新元素
							const newPhotos = [...photo2, { url: data.data.url , name: data.data.name }];
							// 替换整个数组
							photo2.length = 0;
							newPhotos.forEach(item => photo2.push(item));
						} catch (error) {
							console.error('解析接口返回数据失败', error);
							uni.showToast({
								title: '解析接口返回数据失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						console.error('图片上传失败', err);
						uni.showToast({
							title: '图片上传失败',
							icon: 'none'
						});
					}
				});
			}
		})
	}
	function choosePhoto3() {
		uni.chooseImage({
			count: 1,
			success: res => {
				const tempFilePaths = res.tempFilePaths[0];
				uni.uploadFile({
					url: baseUrl+'/file/upload',
					filePath: tempFilePaths,
					name: 'file',
					header: {
						Authorization: uni.getStorageSync('token')
					},
					success: (uploadRes) => {
						const data = JSON.parse(uploadRes.data);
						console.log('图片上传成功', data);
						try {
							// 创建一个新数组并添加新元素
							const newPhotos = [...photo3, { url: data.data.url , name: data.data.name }];
							// 替换整个数组
							photo3.length = 0;
							newPhotos.forEach(item => photo3.push(item));
						} catch (error) {
							console.error('解析接口返回数据失败', error);
							uni.showToast({
								title: '解析接口返回数据失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						console.error('图片上传失败', err);
						uni.showToast({
							title: '图片上传失败',
							icon: 'none'
						});
					}
				});
			}
		})
	}
	function choosePhoto4() {
		uni.chooseImage({
			count: 1,
			success: res => {
				const tempFilePaths = res.tempFilePaths[0];
				uni.uploadFile({
					url: baseUrl+'/file/upload',
					filePath: tempFilePaths,
					name: 'file',
					header: {
						Authorization: uni.getStorageSync('token')
					},
					success: (uploadRes) => {
						const data = JSON.parse(uploadRes.data);
						console.log('图片上传成功', data);
						try {
							// 创建一个新数组并添加新元素
							const newPhotos = [...photo4, { url: data.data.url , name: data.data.name }];
							// 替换整个数组
							photo4.length = 0;
							newPhotos.forEach(item => photo4.push(item));
						} catch (error) {
							console.error('解析接口返回数据失败', error);
							uni.showToast({
								title: '解析接口返回数据失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						console.error('图片上传失败', err);
						uni.showToast({
							title: '图片上传失败',
							icon: 'none'
						});
					}
				});
			}
		})
	}
</script>

<style>
@import "../../common/app.css";	
.card{border-radius: 20px; background-color: #fff; margin: 30rpx; padding: 30rpx 20rpx;}
.input_line{ font-weight: 500; margin: 30rpx 10rpx; padding-left: 20rpx; display: flex; justify-content: space-between; align-items: center;}
.input{ border: 1px solid gray; padding: 10rpx 15rpx; border-radius: 20px; font-size: 20rpx; font-weight: 600; }
.big_title{margin-left: 20rpx; font-weight: 600;}	    
.upload-box {display: flex;flex-direction: column; align-items: center;cursor: pointer;}
.plus-icon {font-size: 40px; color: #ccc; margin-bottom: 10px;}
.upload-text {font-size: 12px; color: #999;}

.photo-upload {
	display: flex;
	align-items: center;
	margin-top: 10rpx;
}
.photo-box {
	width: 140rpx;
	height: 140rpx;
	border: 2rpx dashed #ccc;
	border-radius: 12rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #bbb;
	font-size: 28rpx;
	background: #fafbfc;
}
.plus {
	font-size: 48rpx;
	margin-bottom: 8rpx;
}
/* .upload-text {
	font-size: 24rpx;
} */
.photo-img {
	width: 140rpx;
	height: 140rpx;
	border-radius: 12rpx;
	object-fit: cover;
}
</style>
